<template>
  <div id="btn1">
    <i class="el-icon-arrow-down" @click="change"></i>
    <p class="a1">搜索</p>
    <i class="el-icon-search a3"></i>
    <input type="text" placeholder="知识的边界" class="a2" v-model="val" />
    <i class="a5" @click="change">取消</i>
    <ul v-for="(item, i) in serach2" :key="i">
      <li @click="check(item.courseId)" class="f1">
        <h2 class="innf">{{ item.courseName }}</h2>
        <img class="innni" :src="url + item.imgUrl" alt="" />
        <b class="bfs">{{ item.courseLevel }}</b>
        <b class="baa">{{ item.courseType }}</b>
        <div class="isdfkk">{{ item.courseIntroduce }}</div>
      </li>
    </ul>
    <el-empty v-show="show" description="搜索结果为空"></el-empty>
  </div>
</template>

<script>
import { Search } from "@/api";
export default {
  data() {
    return {
      serach2: [],
      val: "",
      url: "http://192.168.10.32/yonghao/img/",
      list: 0,
      show: false,
    };
  },
  created() {
    this.serach1();
  },
  watch: {
    val: {
      handler() {
        if (this.val.trim() == "") {
          this.serach1();
        } else {
          this.serach1();
        }
      },
      deep: true,
    },
    list: {
      handler() {
        if (this.list == 0) {
          this.show = true;
        } else {
          this.show = false;
        }
      },
    },
  },
  methods: {
    serach1() {
      let val = this.val;
      Search({
        fuzzy: this.val,
      }).then((res) => {
        this.serach2 = res.data.data;
        this.list = this.serach2.length;
      });
    },
    check(item) {
      // http://localhost:8080/#/lesdetail?courseId=1
      this.$router.push({
        // http://localhost:8080/#/lesdetail?courseId=1
        path: "/lesdetail?courseId=" + item,
      });
    },
    change() {
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
#btn1 >>> .el-empty {
  margin-top: 10vh;
}
#btn1 >>> .el-empty__image {
  width: 30vw;
}
#btn1>>> .el-empty__description > p {
  font-size: 3vw;
}
</style>
<style scoped>
#btn1 {
  margin-bottom: 3vh;
}
#btn1 .isdfkk {
  margin-top: 1vh;
  text-indent: 5vw;
  width: 90vw;
  margin-right: 5vw;
  float: right;
  font-size: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; */
}
#btn1 .innni {
  width: 55vw;
  height: 32vw;
  border-radius: 2vw;
}
#btn1 .innf {
  color: black;
  text-shadow: 0px -3px 4px #ffcfad, 0px -2px 3px #ffc79f,
    0px -1.5px 2px #ffb79d, 0px -1px 1.5px #ffb498, 0px -0.5px 1px #ffaf91;
  background-color: #fff;
  margin-top: 1vh;
  font-size: 4.6vw;
  margin-bottom: 1vh;
}
/* #btn1 .innf::first-letter {
  color: rgb(4, 255, 221);
  text-shadow: 0 0 5px, 0 0px 6px 3px blue, 0 -2px 6px 6px cyan,
    0 -4px 9px 9px lightblue;
} */
#btn1 .baa {
  position: absolute;
  right: 7vw;
  top: 21vw;
  font-size: 3vw;
  width: 24vw;
  height: 5vw;
  text-align: center;
  line-height: 5vw;
  border-radius: 1vw;
  color: rgb(41, 23, 65);
  font-weight: normal;
  background: rgba(171, 255, 227, 0.9);
}
#btn1 .bfs {
  position: absolute;
  right: 7vw;
  top: 32vw;
  font-size: 3vw;
  width: 24vw;
  height: 5vw;
  text-align: center;
  line-height: 5vw;
  border-radius: 1vw;
  color: #fff;
  font-weight: normal;
  background: rgba(102, 181, 255, 0.9);
}
#btn1 >>> .el-icon-arrow-down {
  transform: rotate(90deg);
  /* margin-top: 1vh; */
  margin-left: 2vw;
  position: absolute;
  /* top: 200px; */
  font-size: 3vw;
  left: 0vw;
  height: 5vh;
  color: black;
  font-weight: bold;
}

#btn1 >>> .a1 {
  text-align: center;
  font-size: 3vh;
  margin-top: 2vw;
}
#btn1 >>> .a2 {
  width: 82vw;
  height: 4.4vh;
  line-height: 4.4vh;
  font-size: 2vh;
  text-indent: 10vw;
  border-radius: 5vw;
  margin-left: 5vw;
  margin-top: 4vh;
  outline: none;
  background: #fff;
  border: 1px solid #999;
}
#btn1 >>> .ac {
  position: relative;
}

#btn1 >>> .a3 {
  color: #999;
  width: 4vw;
  height: 5vh;
  font-size: 3vh;
  margin-left: 3vw;
  position: absolute;
  left: 4vw;
  margin-top: 4.7vh;
  float: left;
}
#btn1 >>> .a5 {
  font-size: 2vh;
  margin-left: 2vw;
  font-style: normal;
  /* margin-top: -76vh; */
  color: black;
  /* float: right; */
}
#btn1 >>> .a6 {
  font-size: 3vw;
}
#btn1 >>> .a7 {
  width: 30vw;
  height: 3vh;
}
#btn1 >>> .b1 {
  font-size: 4vw;
}

#btn1 >>> .el-tabs el-tabs--top {
  margin-left: 2vw;
}
#btn1 >>> .b2 {
  width: 40vw;
  height: 14vh;
}
#btn1 >>> .b6 {
  display: flex;
  /* background: red; */
  height: 20vh;
  border-bottom: 1px solid #ccc;
  justify-content: space-around;
  margin-top: 4vh;
}
#btn1 >>> .b7 {
  padding-top: 2vh;
}
#btn1 >>> .b8 {
  color: #ccc;
  padding: 1vh 0 0 0;
}
#btn1 >>> .b9 {
  color: #ccc;
  padding: 1vh 0 0 0;
}
#btn1 >>> .b3 {
  width: 28vw;
  height: 6vh;
}
#btn1 >>> .b5 {
  width: 18vw;
  height: 3vh;
  /* background: red; */
  color: orange;
  font-size: 3vh;
  padding-top: 10vh;
}
#btn1 >>> .c1 {
  display: flex;
  justify-content: space-around;
}
#btn1 >>> .c2 {
  width: 26vw;
  height: 15vh;
  border-radius: 2vh;
  padding-top: 3vh;
}
#btn1 >>> .c3 {
  font-size: 2.8vh;
  padding-top: 3vh;
}
#btn1 >>> .c4 {
  padding: 4vh;
  color: #ccc;
  font: size 1vh;
}
#btn1 >>> .d1 {
  width: 17vw;
  height: 9vh;
  padding-top: 1.5vh;
  /* margin-left: -6vw; */
}
#btn1 >>> .d2 {
  width: 98vw;
  height: 13vh;
  /* background: cyan; */
  border-bottom: 1px solid #ccc;
}
#btn1 >>> .d3 {
  display: flex;
}
#btn1 >>> .d5 {
  margin-right: 3vw;
  margin-left: 5vw;
  padding-top: 2vh;
}
#btn1 >>> .d6 {
  margin-left: 5vw;
  padding-top: 2vh;
  color: #ccc;
}

#btn1 >>> .b2 {
  text-align: center;
  color: #ccc;
  font-size: 2vh;
  margin-left: 30vw;
}
#btn1 >>> .f1 {
  position: relative;
  font-size: 3vh;
  height: 30vh;
  border-bottom: 1px solid #ccc;
  padding: 2vh 0 2vh 8vw;
}
</style>
 <style scoped>
#btn1 >>> .el-tabs__item {
  margin-top: 4vh;
  height: 4vh;
  padding-left: 13vw;
  font-size: 4vh;
}
#btn1 >>> .el-tabs__item is-top {
  font-size: 40px;
}
</style>